<template>
    <van-contact-card type="edit" :name="`${address.consignee} ${address.region_text}`" :tel="address.mobile" v-if="address" :editable="false"/>

    <!-- 商品卡片 -->
    <van-card
        v-for="(item, key) in product"
        :title="item.products.name"
        :thumb="item.products.thumbs_text"
        :num="item.pronum"
        @click-thumb="toProductInfo(item.proid)"
    >
        <template #title>
        <div class="title">{{ item.products.name }}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.attrs">
        <van-tag v-for="(attr,index) in item.attrs" :key="index" class="tag" type="primary">{{ attr.value }}</van-tag>
        </template>

        <template #desc v-else>
        <van-tag class="tag" type="danger">无规格数据</van-tag>
        </template>

        <template #tags>
        <div class="price">单价：￥{{ item.price }}</div>
        </template>

        <template #price>
        <div class="price">合计：￥{{ item.total }}</div>
        </template>
    </van-card>

    <!-- 订单信息 -->
    <van-cell title="订单号" :value="order.code" />
    <van-cell title="订单总价" :value="`￥${order.amount}`" />
    <van-cell title="支付方式" :value="order.pay_text" />
    <van-cell title="订单状态" :value="order.status_text" />
    <van-cell title="优惠金额" :value="order.coupon_amount" />
    <van-cell title="下单时间" :value="order.createtime_text" />
    <van-cell title="订单描述" :value="order.remark" />

    <!-- 操作按钮组 -->
    <div class="actions">
        <van-button square hairline type="primary" size="large">联系客服</van-button>
        <van-button square hairline type="success" size="large">物流详情</van-button>
        <van-button square hairline type="danger" size="large" v-if="order.status=='1'">申请退款</van-button>
        <!-- <van-button square hairline type="danger" size="large">确认收货</van-button>
        <van-button square hairline type="warning" size="large">立即评价</van-button>
        <van-button square hairline type="primary" size="large">申请退货</van-button>
        <van-button square hairline type="success" size="large">填写退货信息</van-button>
        <van-button square hairline type="danger" size="large">退货详情</van-button> -->
    </div>

</template>

<script setup>
    const {proxy} = getCurrentInstance()

    // 响应式数据
    let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
    let product = ref([])
    let address = ref(null)
    let order = ref({})

    onBeforeMount(() => {
        OrderData()
    })

    const OrderData = async () => {
        var params = {
            orderid: orderid,
            busid: proxy.$business.value.id
        }

        var result = await proxy.$POST({
            url: '/order/info',
            params
        })

        if (result.code == 0) {
            proxy.$fail(result.msg)
            return false
        }

        address.value = result.data.address
        order.value = result.data.order

        if (result.data.product) {
            result.data.product.map(item => item.attrs = JSON.parse(item.attrs))
        }
        product.value = result.data.product

    }

    //跳转到商品详情界面
    const toProductInfo = proid => proxy.$router.push({ path: '/product/info', query: { proid } })


</script>

<style scoped>
  :deep(.cart) {
    display: flex;
    width: 100%;
  }
  ::v-deep .van-swipe-cell {
    width: 100%;
  }
  .delete-button {
    height: 100%;
  }


  .van-card{
    background-color:#fff;
  }

  .title{
    font-size:16px;
    font-weight: bold;
  }

  .tag{
    margin-right:5px;
  }

  .price{
    font-size:14px;
    font-weight: bold;
  }

  .van-checkbox-group1{
    overflow: scroll;
    height:615px;
  }

  .actions{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
  }
</style>
